<template>
	<u-popup :show="show" mode="bottom" bgColor="#fff" round="20">
		<view class="login">
			<view class="colse" @click="colse">
				<u-icon name="close" size="34rpx" color="#3D3D3D" bold></u-icon>
			</view>
			<view class="logo">
				<!-- <image :src="vuex_config.logo"  style="width: 52rpx;height: 52rpx;"></image> -->
				立即登录
			</view>
			<view class="operation">
				为了获取更多操作，请授权登录
			</view>
			
			<button v-if="checked" class="button" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
				<u-icon name="weixin-fill" color="#ffffff" size="44" class="u-m-r-24"></u-icon> 微信授权登录
			</button>
			<button class="button" v-else @click="showtToast">
				<u-icon name="weixin-fill" color="#ffffff" size="44" class="u-m-r-24"></u-icon> 微信授权登录
			</button>
			<view class="read" @click="checked = !checked">
				<view class="spot" :class="{bg: checked}"></view>
				我已阅读并同意
				<text @click="$multiRedirect('/pages/web/web?url=web_protocol_url&type=userProtocol')">《用户协议》</text>
				和
				<text class="u-p-l-10" @click="$multiRedirect('/pages/web/web?url=web_protocol_url&type=tipProtocol')">《隐私政策》</text>
			</view>
		</view>
	</u-popup>
</template>

<script>
	
	export default {
		data() {
			return {
				show: false,
				checked: false,
				loginState:'avatar',
				
			};
		},
		mounted() {
			
			this.login()
		},
		methods: {
			login(times=0){
				if(times>3){
					uni.$u.toast('登录失败')
					return;
				}
				
				wx.login({
				  provider: 'weixin', //使用微信登录
				  success:  (res)=>{
				   
					this.$network('/api/wechatMin/codeToOpenId',{code:res.code}).then(res=>{
						const data = res.data||{}
						const openid = data.openid||''
						const session_key = data.session_key||''
						this.$u.vuex('vuex_user_openid', openid)
						this.$u.vuex('vuex_session_key', session_key)
						
						if(data.loginInfo){
							this.$store.commit('handleLogin',data.loginInfo)
							console.log('>><<',data.loginInfo.userInfo && !data.loginInfo.userInfo.is_phone)
							if(data.loginInfo.userInfo && !data.loginInfo.userInfo.phone){
								this.openTask(true)
							}
						}else{
							this.openTask(true)
						}
						
						
						
					}).catch(res=>{
						console.log('>>>',res)
						this.login(times+1)  
					})
				  },
				  fail:(res)=>{
					this.login(times+1)  
					uni.$u.toast("登录失败:"+JSON.stringify(res))
				  }
				});
			},
			openTask(refresh){
				setTimeout(()=>{
					if(refresh || !this.vuex_user_id){
						this.open()
					}
				},1500)
			},
			
			
			// getUserInfo(res){
				
			// 	console.log('>>onGetUserInfo<<')
			// 	wx.getUserProfile({
			// 		desc:'为了获取更多操作，请授权登录',
			// 		success:(res)=>{
			// 			console.log(res)
			// 		},
			// 		fail:(res)=>{
			// 			console.err(res)
			// 		},
			// 	})
			// },
			open(){
				if(!this.vuex_user_id){
					this.login()
				}
				this.loginState = 'avatar'
				this.show = true
			},
			spotClick(e) {
				uni.navigateTo({
					url: '/pages/my/privacy?type=' + e
				})
			},
			colse() {
				this.show = false
			},
			showtToast() {
				uni.$u.toast('请先阅读并同意合作协议');
			},
			onGetPhoneNumber(e) {
				this.show = false;
				if(!this.checked) return uni.$u.toast('请先阅读并同意合作协议');
				if(!e.detail.code) return
				this.$network('/api/wechatMin/codeToPhone',{
					openid: this.vuex_user_openid,
					code: e.detail.code,
				}).then(res => {
					const data = res.data||{}
					if(data.loginInfo){
						this.$store.commit('handleLogin',data.loginInfo)
						this.$emit('bindPhone')
					}
				})
			},
			handleLogin(){}
		}
	}
</script>

<style lang="scss">
	.login {
		height: 575rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 58rpx 30rpx 0;

		.colse {
			position: absolute;
			top: 26rpx;
			right: 26rpx;
		}

		.logo {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;

			image {
				border-radius: 50%;
				height: 52rpx;
				margin-right: 24rpx;
			}
		}

		.operation {
			margin-top: 100rpx;
			font-size: 24rpx;
			color: #333333;
			text-align: center;
		}

		.button {
			width: 428rpx;
			height: 80rpx;
			background: #F7C141;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(58, 138, 251, 0.29);
			border-radius: 10rpx;
			margin: 66rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.read {
			font-size: 22rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 64rpx;

			text {
				color: #F7C141;
			}

			.spot {
				width: 22rpx;
				height: 22rpx;
				border-radius: 50%;
				&.bg{
					background-color: #F7C141;
				}
				margin-right: 20rpx;
				border: #F7C141 4rpx solid;
				margin-top: 5rpx;
			}
		}
	}
</style>
